<template>
    <div>
    <div class="wrap">
        <div class="mod_singer_push">
            <div class="container">
                <h2 class="singer_push_tit">
                    <i class="txt_icon">万千歌手，尽在眼前</i>
                </h2>
                <div class="singer_push_desc">
                    <i class="txt_icon">登录查看你关注的歌手</i>
                </div>
                <el-button plain class="singer_push_btn">立即登录</el-button>
            </div>
        </div>
    
    </div>          
<div class="section_nav">

<el-row>
<el-button type="success">全部</el-button>
<div v-for="(item,index) in Character" :key="index" class="singer_tag_list">
<el-link :underline="false">{{ item }}</el-link>
</div>
</el-row>

<el-row>
<el-button type="success">全部</el-button>
<div v-for="(item,index) in Country" :key="index" class="singer_tag_list">
<el-link :underline="false">{{ item }}</el-link>
</div>
</el-row>
<el-row>
<el-button type="success">全部</el-button>
<div v-for="(item,index) in Sex" :key="index" class="singer_tag_list">
<el-link :underline="false">{{ item }}</el-link>
</div>
</el-row>

<el-row>
<el-button type="success">全部</el-button>
<div v-for="(item,index) in Liupai" :key="index" class="singer_tag_list">
<el-link :underline="false">{{ item }}</el-link>
</div>
</el-row>

    </div>
    </div>

</template>

<script>
    export default{
        name:'GeShouPage',
        data() {
            return {
                Character:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
                Country:['内地','港台','欧美','日本','韩国'],
                Sex:['男','女','组合'],
                Liupai:['流行','说唱','国风','摇滚','电子','民谣','R&B','民族乐','轻音乐','爵士','古典','乡村','蓝调']
            }
        },
    }
</script>
<style  scoped>
    .txt_icon{
        font:0/0 a;
    }
    .container{
        margin: 0 auto;

        max-width: 1200px;
    }
    .singer_push_btn{
        display: block;
        width: 174px;
        margin: 20px auto 0 !important;
    }
    .singer_push_tit{
        color: white;
        margin-left: auto;
        margin-right: auto;
    width: 494px;
    height: 60px;
    margin-top: 103px;
    background: url('@/assets/GeShou/singer_tit.png') 50% 0 repeat-x;
    background-position: 0 0;
    }
    .wrap{
        width: 100%;
    }
    .singer_push_desc{
        margin-left: auto;
        margin-right: auto;
        width: 260px;
        height: 26px;
        margin-top: 20px;
        background-position: 0 -70px;
        background-image: url('@/assets/GeShou/singer_tit.png');

    }
    .mod_singer_push{
        position: relative;
        width: 100%;
        height: 376px;
        background: url('@/assets/GeShou/bg.webp') 50% 0 repeat-x;
        overflow: hidden;
    }
    .singer_tag_list{
        margin: 0 12px 14px 0;
        display:inline-block;
    }
    .el-button{
        background-color:#31c27c;
        margin-right:20px;
        margin-bottom:10px;
    }
    .el-link{
        font-family: poppin,Tahoma,Arial,微软雅黑,sans-serif;
        margin-right:20px;
        line-height:1.5;
        font-size:14px
    }
    .el-link:hover{
        color:#31c27c;
    }
    .section_nav{
        background-color: #fbfbfd;
        margin-top: 100px;
        max-width:1200px;
        margin-left:auto;
        margin-right: auto;
        margin-top: 60px;
    }
</style>